<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<title>商城管理系统</title>
<style>
.main_div {
	min-width: 1000px
}

.center {
	width: 200px;
	height: 100px;
	background-color: #ccc;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -50px;
	z-index: 10;
	text-align: center;
	line-height: 50px;
	border-radius: 6px;
}
</style>
</head>
<body>
	<%@ include file="header.jsp"%>
	<%@ include file="left.jsp"%>
	<div id="index"
		style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">
		<section id="motai">
			<div class="scrollbar1-1" id="style1-1">
				<div class="main_div" style="height: 560px;">
					<div class="main_title">
						<span>新增Banner</span>
					</div>
					<form class="form-horizontal" enctype="multipart/form-data"
						style="margin-top: 30px" id="uploadForm">

						<div class="form-group">
							<label class="col-xs-2 control-label">首页Banner图：</label>
							<div class="col-xs-3">
								<input type="file" id="bannerFile" name="bannerFile"
									onchange="selectImage(this);"> <img id="image"
									style="width:375px;height:180px" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品介绍图片（建议图片大小为375*180像素）</label>
						</div>
						<div class="col-xs-4 col-xs-offset-2">
							<button id="setButton" class="col-xs-4 btn btn-primary"
								type="button">确认添加</button>
						</div>

					</form>
				</div>
			</div>
		</section>
	</div>
	<script>
		
		var image = '';
		function selectImage(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		$(function() {
			$("#setButton").click(function() {
				/********************用于判断图片大小以及图片名称是否合法******************/
			    var allinput = $("#uploadForm").find("input");
				for (var i = 0; i < allinput.length; i++) {
					if (allinput[i].value) {
					} else {
						return;
					}
				}
				var aarr = document.getElementsByTagName("input");			
				var barr = [];
				var flag1 = false; //用于判断图片大小
				for (var i = 0; i < aarr.length; i++) {
					if (aarr[i].type == "file") {
						barr.push(aarr[i])
					}
				}
				for (var z = 0; z < barr.length; z++) {
					if (barr[z].files[0].size > 512000) { //判断图片大小是否大于500kb
						flag1 = true;
					}
				}
				if (flag1) {
					alert("上传图片不得超过500kb每张");
					return;
				}
				/******************用于判断图片大小以及图片名称是否合法****************/
				$.ajax({
					url : urls + "utilAction/createIndexBanner",
					type : 'POST',
					cache : false,
					data : new FormData($('#uploadForm')[0]),
					processData : false,
					contentType : false
				}).done(function(res) {
					//console.log(res)
					if (res == true) {
						alert("提交成功")
					} else if (res == 251) {
						alert("该名称已存在，请勿重复提交")
					} else if (res == false) {
						alert("提交失败")
					}
				}).fail(function(res) {
					alert("服务器异常")
				});
			})
		})
	</script>
</body>
</html>